<template>
  <div>
    <p>录像demo</p>
    
    <!-- figure 作为文档中的一个独立单元 用作内容包括，常用来作插图的图例 -->
    <figure>
      <!-- <pre style="background-color:gainsboro;">
        <code>
          &lt;audio controls src="@/assets/audioSource.mp3"&gt;&lt;/audio&gt;
        </code>
      </pre> -->
      <audio controls src="@/assets/audioSource.mp3">
        <source src="@/assets/audioSource.mp3" type="audio/mpeg">
        在浏览器不支持该元素时，会显示 {{ "<audio></audio>" }} 标签之间的内容作为回退
      </audio>
      <!-- 
        1.controls 显示控制按钮
        2.src 指定音频文件的路径 或者内部用<source>标签指定
        3.autoplay 自动播放
        4.loop 循环播放
        5.preload 预加载 none 不预加载， auto 预加载，设置 autoplay 后无效
       -->

    </figure>
    <p>按钮播放</p>
    <!-- <el-button v-if="!isShowAudio" type="primary" size="mini" @click="play('@/assets/audioSource.mp3')">
      播放 {{time2Min()}}
    </el-button> -->
    <!-- <audio 
      v-if="isShowAudio" 
      ref="audio" 
      controls 
      src="@/assets/audioSource.mp3" 
      autoplay 
      class="record-audio"
    >
      <source src="@/assets/audioSource.mp3" type="audio/mpeg">
      在浏览器不支持该元素时，会显示 {{ "<audio></audio>" }} 标签之间的内容作为回退
    </audio> -->
  </div>
</template>
<script>
export default {
  name: 'AudioTable',
  data() {
    return {
      isShowAudio: false,
      isAudioSeeking: false,
      audioPlayTime: 0, // 音频播放时长
    }
  },
  methods: {  
    onResult (data) {
      console.log('The blob data:', data);
      console.log('Downloadable audio', window.URL.createObjectURL(data));
    }
  }
}
</script>
<style scoped>
.record-audio {
  width: 350px;
  height: 24px;
}
</style>